<!-- <div>
  <ns-placeholder-pic [lineOne]="'找不到就算了'" [lineTwo]="'我也没办法你看着办吧'" [picSize]="200"></ns-placeholder-pic>
</div> -->

<!-- <div>
  <input [nsDebounce]="3000" [(ngModel)]="searchText" (ngModelChange)="change()">
  <div>searchText：{{searchText}},change:{{i}}</div>
</div>  -->

<!-- <div class="demo-container">
  <div class="loading-box" [nsLoading]="isLoading">
    <h2>这里是内容</h2>
    <p>当 isLoading 为 true 时会显示加载效果</p>
  </div>
  <button (click)="toggleLoading()">切换加载状态</button>
</div> -->

<!-- 使用总值和已完成值 -->
<!-- <ns-progress [nsTotal]="100" [nsPassed]="75" [nsPrecision]="2"></ns-progress> -->

<!-- 直接使用百分比 -->
<!-- <ns-progress [nsPassed]="75" [nsColor]="'#4CAF50'"></ns-progress> -->

<!-- 禁用动画 -->
<!-- <ns-progress [nsPassed]="75" [nsAnimate]="false"></ns-progress> -->

<!-- 使用自动颜色渐变 -->
<!-- <ns-progress [nsTotal]="100" [nsPassed]="75"></ns-progress> -->

<!-- 固定使用绿色 -->
<!-- <ns-progress [nsTotal]="100" [nsPassed]="75" [nsColor]="'#4CAF50'"></ns-progress> -->
<!-- 
<div style="padding: 20px;"></div>
<h3>使用总值和已完成值</h3>
<div style="margin-bottom: 20px;">
  <label>进度值：</label>
  <input type="number" [(ngModel)]="progressValue" style="margin: 0 10px;">

  <label>总值：</label>
  <input type="number" [(ngModel)]="progressTotal" style="margin: 0 10px;">

  <label>小数位数：</label>
  <input type="number" [(ngModel)]="precision" style="margin: 0 10px;">

  <label>使用自定义颜色</label>
  <input type="checkbox" [(ngModel)]="useCustomColor">


</div>

<ns-progress [nsTotal]="progressTotal" [nsPassed]="progressValue" [nsPrecision]="precision"
  [nsColor]="useCustomColor ? '#4CAF50' : undefined">
</ns-progress>

<h3 style="margin-top: 30px;">直接输入百分比</h3>
<div style="margin-bottom: 20px;">
  <label>百分比值（可输入数字或带%的字符串）：</label>
  <input [(ngModel)]="percentageValue" style="margin: 0 10px;">
</div>

<ns-progress [nsPassed]="percentageValue"></ns-progress> -->
<!-- 
<div class="container">
  <h1>Toast 示例</h1>

  <div class="button-group">
    <button (click)="showSuccessToast()">成功提示</button>
    <button (click)="showErrorToast()">错误提示</button>
    <button (click)="showInfoToast()">信息提示</button>
    <button (click)="showWarningToast()">警告提示</button>
  </div>

  <div class="config-panel">
    <h2>配置选项</h2>
    <div>
      <label>
        位置：
        <select [(ngModel)]="position">
          <option value="top-center">顶部居中</option>
          <option value="top-right">顶部右侧</option>
          <option value="bottom-center">底部居中</option>
          <option value="bottom-right">底部右侧</option>
        </select>
      </label>
    </div>
    <div>
      <label>
        持续时间：
        <input type="number" [(ngModel)]="duration" min="1000" step="1000" />
      </label>
    </div>
    <div>
      <label>
        <input type="checkbox" [(ngModel)]="closable" />
        显示关闭按钮
      </label>
    </div>
  </div>
</div>


<div class="container" *ngIf="false">
  <h1>PopupTip 示例</h1>

  <div class="demo-section">
    <h2>基本用法</h2>
    <button [nsPopupTip]="'提交成功！'" nsPopupTipType="success">
      点击显示成功提示
    </button>
  </div>

  <div class="demo-section">
    <h2>不同类型</h2>
    <div class="button-group">
      <button [nsPopupTip]="'提交成功！'" nsPopupTipType="success">
        成功
      </button>
      <button [nsPopupTip]="'提交失败！'" nsPopupTipType="error">
        错误
      </button>
      <button [nsPopupTip]="'这是一条提示信息'" nsPopupTipType="info">
        信息
      </button>
      <button [nsPopupTip]="'请注意！'" nsPopupTipType="warning">
        警告
      </button>
    </div>
  </div>

  <div class="demo-section">
    <h2>不同位置</h2>
    <div class="position-demo">
      <button [nsPopupTip]="'顶部提示'" nsPopupTipPosition="top">
        顶部
      </button>
      <button [nsPopupTip]="'底部提示'" nsPopupTipPosition="bottom">
        底部
      </button>
      <button [nsPopupTip]="'左侧提示'" nsPopupTipPosition="left">
        左侧
      </button>
      <button [nsPopupTip]="'右侧提示'" nsPopupTipPosition="right">
        右侧
      </button>
    </div>
  </div>

  <div class="demo-section">
    <h2>不同触发方式</h2>
    <div class="trigger-demo">
      <button [nsPopupTip]="'点击触发'" nsPopupTipTrigger="click">
        点击触发
      </button>
      <div [nsPopupTip]="'悬停触发'" nsPopupTipTrigger="hover" class="hover-element">
        悬停触发
      </div>
      <button [nsPopupTip]="'手动触发'" nsPopupTipTrigger="manual" #manualTip="nsPopupTip">
        手动触发
      </button>
      <div class="manual-controls">
        <button (click)="manualTip.show()">显示</button>
        <button (click)="manualTip.hide()">隐藏</button>
      </div>
    </div>
  </div>
</div>

<div class="container" *ngIf="false">
  <h1>PopupTip 服务示例</h1>

  <div class="demo-section">
    <h2>通过服务触发</h2>
    <button #submitBtn (click)="submitForm()">提交表单</button>

    <div class="form-group">
      <label>模拟API响应：</label>
      <select [(ngModel)]="apiResponse">
        <option value="success">成功</option>
        <option value="error">失败</option>
      </select>
    </div>
  </div>
</div> -->


<!-- 基本用法 -->
<!-- <div nsMarquee [nsMarqueeFadeWidth]="10">这是一段很长的文字内容，将会在容器中滚动显示，就像街上的LED屏幕一样</div> -->

<!-- 自定义滚动速度 -->
<!-- <div [nsMarquee]="true" [nsMarqueeSpeed]="100" >这是一段很长的文字内容，滚动速度更快</div> -->

<!-- 自定义暂停时间 -->
<!-- <div [nsMarquee]="true" [nsMarqueePause]="2000">这段文字在开始和结束时会暂停2秒</div> -->

<!-- 启用渐变效果 -->
<!-- <div [nsMarquee]="true" [nsMarqueeFade]="false">这段文字将不启用渐变效果</div> -->

<!-- 自定义渐变宽度 -->
<!-- <div [nsMarquee]="true" [nsMarqueeFade]="true" [nsMarqueeFadeWidth]="50">这段文字将启用渐变效果，宽度为50像素</div>

<div style="display: flex;width: 10rem;" [nsMarquee]="true">
  <div >我是内容，</div>
  <div>我也是内容</div>
</div> -->

<!-- 使用新的组件方式 -->
<h3>使用内容投影的滚动组件</h3>
<ns-marquee [nsMarqueeSpeed]="50" [nsMarqueePause]="1000" style="display: block; width: 10rem; border: 1px solid #ccc; padding: 5px;">
  <div style="display: inline-block; width: 20rem; white-space: nowrap;">
    <span>我是复杂内容，</span>
    <span>我也是<span style="color: red;">复杂</span>内容，</span>
    <span style="color: blue;">这是更多内容，确保足够长来触发滚动效果</span>
  </div>
</ns-marquee>

<!-- 另一个更明显的例子 -->
<h3>包含图片的复杂内容</h3>
<ns-marquee [nsMarqueeSpeed]="30" style="display: block; width: 200px; border: 1px solid #ccc; margin-top: 20px;">
  <div style="display: inline-block; width: 500px; white-space: nowrap;">
    <span>🔴</span>
    <span style="color: red; font-weight: bold;">重要通知：</span>
    <span>这是一条非常长的<span *ngIf="showit" style="color: blue;">滚动通知，包</span>含了很多内容，确保能够触发横向滚动效果。</span>
    <span style="color: blue;">感谢您的关注！</span>
    <span>🔵</span>
    <div *ngIf="showit">很快就富士康的官方可接受的范围若i法国</div>
  </div>
</ns-marquee>

<div style="width: 100px; height: 100px; background-color:bisque;" (click)="showit = !showit"></div>

<!-- 简单的单行文本示例 -->
<h3>简单的单行文本</h3>
<ns-marquee [nsMarqueeSpeed]="40" style="display: block; width: 150px; border: 1px solid #ccc; margin-top: 20px;">
  <span style="white-space: nowrap;">这是一条简单的单行文本消息，没有复杂的HTML结构。</span>
</ns-marquee>

<h3>测试用例：不同速度的滚动</h3>
<div style="display: flex; flex-direction: column; gap: 10px;">
  <div>
    <span>慢速 (20px/s)：</span>
    <ns-marquee [nsMarqueeSpeed]="20" style="display: inline-block; width: 200px; border: 1px solid #ccc;">
      <span style="white-space: nowrap;">这是低速滚动的文本演示，速度设置为20像素/秒</span>
    </ns-marquee>
  </div>
  
  <div>
    <span>中速 (50px/s)：</span>
    <ns-marquee [nsMarqueeSpeed]="50" style="display: inline-block; width: 200px; border: 1px solid #ccc;">
      <span style="white-space: nowrap;">这是中速滚动的文本演示，速度设置为50像素/秒</span>
    </ns-marquee>
  </div>
  
  <div>
    <span>高速 (100px/s)：</span>
    <ns-marquee [nsMarqueeSpeed]="100" style="display: inline-block; width: 200px; border: 1px solid #ccc;">
      <span style="white-space: nowrap;">这是高速滚动的文本演示，速度设置为100像素/秒</span>
    </ns-marquee>
  </div>
</div>

<h3>测试用例：不同暂停时间</h3>
<div style="display: flex; flex-direction: column; gap: 10px;">
  <div>
    <span>无暂停 (0ms)：</span>
    <ns-marquee [nsMarqueePause]="0" style="display: inline-block; width: 200px; border: 1px solid #ccc;">
      <span style="white-space: nowrap;">这个滚动没有暂停时间，会连续不断滚动</span>
    </ns-marquee>
  </div>
  
  <div>
    <span>短暂停 (500ms)：</span>
    <ns-marquee [nsMarqueePause]="500" style="display: inline-block; width: 200px; border: 1px solid #ccc;">
      <span style="white-space: nowrap;">这个滚动有短暂的暂停时间，只有500毫秒</span>
    </ns-marquee>
  </div>
  
  <div>
    <span>长暂停 (3000ms)：</span>
    <ns-marquee [nsMarqueePause]="3000" style="display: inline-block; width: 200px; border: 1px solid #ccc;">
      <span style="white-space: nowrap;">这个滚动有较长的暂停时间，有3秒钟</span>
    </ns-marquee>
  </div>
</div>

<h3>测试用例：动态内容变化</h3>
<div style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px;">
  <ns-marquee style="display: block; width: 250px; border: 1px solid #ccc;">
    <div style="white-space: nowrap;">
      当前时间: {{ currentTime }} 
      <span *ngIf="showSpecialMessage" style="color: red; font-weight: bold"> - 特殊消息!</span>
    </div>
  </ns-marquee>
  
  <div style="margin-top: 10px;">
    <button (click)="toggleSpecialMessage()">切换特殊消息</button>
    <button (click)="updateCurrentTime()">更新当前时间</button>
  </div>
</div>

<h3>测试用例：复杂布局内容</h3>
<ns-marquee style="display: block; width: 300px; border: 1px solid #ccc; margin-bottom: 20px;">
  <div style="white-space: nowrap; display: inline-flex; align-items: center;">
    <div style="background-color: #f0f0f0; padding: 5px; border-radius: 4px; margin-right: 10px;">
      <strong>公告</strong>
    </div>
    <div style="color: #555; margin-right: 10px;">重要通知:</div>
    <div style="color: blue; text-decoration: underline; margin-right: 10px;">新功能上线</div>
    <div style="display: inline-flex; align-items: center; background-color: #fff8e1; padding: 2px 8px; border-radius: 10px;">
      <span style="color: orange; margin-right: 5px;">⚠️</span>
      <span>请及时更新系统</span>
    </div>
  </div>
</ns-marquee>

<h3>测试用例：不同宽度容器</h3>
<div style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px;">
  <div>
    <span>窄容器 (150px)：</span>
    <ns-marquee style="display: inline-block; width: 150px; border: 1px solid #ccc;">
      <span style="white-space: nowrap;">这是在窄容器中的滚动文本</span>
    </ns-marquee>
  </div>
  
  <div>
    <span>宽容器 (400px)：</span>
    <ns-marquee style="display: inline-block; width: 400px; border: 1px solid #ccc;">
      <span style="white-space: nowrap;">这是在宽容器中的滚动文本，如果文本不够长，可能不会滚动</span>
    </ns-marquee>
  </div>
  
  <div>
    <span>响应式容器 (50%)：</span>
    <ns-marquee style="display: block; width: 50%; border: 1px solid #ccc;">
      <span style="white-space: nowrap;">这是在响应式宽度容器中的滚动文本，宽度为父容器的50%</span>
    </ns-marquee>
  </div>
</div>

<h3>测试用例：不同渐变效果</h3>
<div style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px;">
  <div>
    <span>有渐变效果：</span>
    <ns-marquee [nsMarqueeFade]="true" [nsMarqueeFadeWidth]="20" style="display: inline-block; width: 200px; border: 1px solid #ccc;">
      <span style="white-space: nowrap;">这个滚动带有边缘渐变效果，使过渡更平滑</span>
    </ns-marquee>
  </div>
  
  <div>
    <span>无渐变效果：</span>
    <ns-marquee [nsMarqueeFade]="false" style="display: inline-block; width: 200px; border: 1px solid #ccc;">
      <span style="white-space: nowrap;">这个滚动没有边缘渐变效果</span>
    </ns-marquee>
  </div>
</div>

<h3>测试用例：超长复杂内容</h3>
<ns-marquee [nsMarqueeSpeed]="60" style="display: block; width: 300px; border: 1px solid #ccc; margin-bottom: 20px;">
  <div style="white-space: nowrap; display: inline-flex; align-items: center;">
    <span style="margin-right: 10px;">📢</span>
    <span style="font-weight: bold; margin-right: 10px;">系统公告:</span>
    <span style="margin-right: 10px;">尊敬的用户，系统将于2023年12月31日23:59:59进行维护升级，</span>
    <span style="color: red; margin-right: 10px;">预计停机维护时间为2小时，</span>
    <span style="background-color: yellow; padding: 2px 5px; margin-right: 10px;">请提前做好相关准备工作，</span>
    <span style="text-decoration: underline; margin-right: 10px;">给您带来的不便敬请谅解。</span>
    <span style="font-style: italic; margin-right: 10px;">感谢您的支持与配合！</span>
    <span>如有疑问，请联系系统管理员。</span>
  </div>
</ns-marquee>

<h3>测试用例：ngFor 实时数据列表</h3>
<div style="margin-bottom: 20px;">
  <ns-marquee style="display: block; width: 300px; border: 1px solid #ccc; margin-bottom: 10px;">
    <div style="white-space: nowrap; display: inline-flex; align-items: center;">
      <ng-container *ngFor="let item of dataItems; let i = index">
        <div style="display: inline-flex; align-items: center; margin-right: 15px; padding: 3px 8px; border-radius: 4px;"
             [style.background-color]="i % 2 === 0 ? '#f0f8ff' : '#fff0f5'">
          <span style="font-weight: bold; margin-right: 5px;">{{item.title}}:</span>
          <span>{{item.value}}</span>
        </div>
      </ng-container>
    </div>
  </ns-marquee>
  
  <div style="margin-top: 10px;">
    <button (click)="addDataItem()">添加数据项</button>
    <button (click)="removeDataItem()">删除数据项</button>
    <button (click)="updateDataItems()">更新所有数据</button>
  </div>
</div>

<h3>测试用例：ngIf 条件切换</h3>
<div style="margin-bottom: 20px;">
  <ns-marquee style="display: block; width: 300px; border: 1px solid #ccc; margin-bottom: 10px;">
    <div style="white-space: nowrap;">
      <span style="font-weight: bold;">系统状态:</span>
      
      <ng-container *ngIf="systemStatus === 'online'; else offlineTemplate">
        <span style="color: green; margin-left: 5px;">● 在线运行中</span>
        <span style="margin-left: 10px;">服务器响应时间: {{responseTime}}ms</span>
        <span *ngIf="userCount > 0" style="margin-left: 10px;">当前在线用户: {{userCount}}人</span>
      </ng-container>
      
      <ng-template #offlineTemplate>
        <span style="color: red; margin-left: 5px;">● 系统维护中</span>
        <span style="margin-left: 10px;">预计恢复时间: {{recoveryTime}}</span>
      </ng-template>
    </div>
  </ns-marquee>
  
  <div style="margin-top: 10px;">
    <button (click)="toggleSystemStatus()">切换系统状态</button>
    <button (click)="updateSystemMetrics()">更新系统指标</button>
    <button (click)="toggleUserCount()">切换用户显示</button>
  </div>
</div>

<h3>测试用例：复杂嵌套ngIf和ngFor</h3>
<div style="margin-bottom: 20px;">
  <ns-marquee [nsMarqueeSpeed]="40" style="display: block; width: 350px; border: 1px solid #ccc; margin-bottom: 10px;">
    <div style="white-space: nowrap; display: inline-flex; align-items: center;">
      <ng-container *ngFor="let category of categories">
        <div style="display: inline-flex; align-items: center; margin-right: 20px; padding: 5px; border-radius: 4px; background-color: #f5f5f5;">
          <span style="font-weight: bold; margin-right: 8px;">{{category.name}}</span>
          
          <ng-container *ngIf="category.items.length > 0; else emptyCategory">
            <span>(</span>
            <ng-container *ngFor="let item of category.items; let last = last">
              <span *ngIf="item.active" [style.color]="item.color">{{item.name}}</span>
              <span *ngIf="!last && item.active">, </span>
            </ng-container>
            <span>)</span>
          </ng-container>
          
          <ng-template #emptyCategory>
            <span style="color: #999;">(无数据)</span>
          </ng-template>
        </div>
      </ng-container>
    </div>
  </ns-marquee>
  
  <div style="margin-top: 10px;">
    <button (click)="toggleCategoryItems()">切换分类项目</button>
    <button (click)="addNewCategory()">添加新分类</button>
    <button (click)="shuffleCategories()">重新排序分类</button>
  </div>
</div>